<template>
  <div>
    <pre>
        独立引入:
          import SvgIconAddLocation from 'mars-pro/lib/icons/add-location'
          &lt;svg-icon-add-location/&gt;
        全局引入: 
        import Vue from 'vue'
        import SvgIcon from 'mars-pro/lib/icons'
        Vue.use(SvgIcon)
        建议采用全局引入的方式,因为 pro-icon 或者 pro-action 会使用这一特性, 例如:
        &lt;pro-icon icon=&quot;iconName&quot;&gt; 或者 &lt;pro-action icon=&quot;iconName&quot;&gt;
        当iconName需要自动识别svg图标还是css fonts 图标

     </pre
    >
    <ul class="svg-demo-icon-list">
      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-add-location"
        data-filename="add-location"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-add-location />
          <span class="icon-name">svg-icon-add-location</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-add"
        data-filename="add"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-add />
          <span class="icon-name">svg-icon-add</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-aim"
        data-filename="aim"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-aim />
          <span class="icon-name">svg-icon-aim</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-alarm-clock"
        data-filename="alarm-clock"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-alarm-clock />
          <span class="icon-name">svg-icon-alarm-clock</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-apple"
        data-filename="apple"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-apple />
          <span class="icon-name">svg-icon-apple</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-down-bold"
        data-filename="arrow-down-bold"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-down-bold />
          <span class="icon-name">svg-icon-arrow-down-bold</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-down"
        data-filename="arrow-down"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-down />
          <span class="icon-name">svg-icon-arrow-down</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-left-bold"
        data-filename="arrow-left-bold"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-left-bold />
          <span class="icon-name">svg-icon-arrow-left-bold</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-left"
        data-filename="arrow-left"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-left />
          <span class="icon-name">svg-icon-arrow-left</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-right-bold"
        data-filename="arrow-right-bold"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-right-bold />
          <span class="icon-name">svg-icon-arrow-right-bold</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-right"
        data-filename="arrow-right"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-right />
          <span class="icon-name">svg-icon-arrow-right</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-up-bold"
        data-filename="arrow-up-bold"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-up-bold />
          <span class="icon-name">svg-icon-arrow-up-bold</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-arrow-up"
        data-filename="arrow-up"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-arrow-up />
          <span class="icon-name">svg-icon-arrow-up</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-avatar"
        data-filename="avatar"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-avatar />
          <span class="icon-name">svg-icon-avatar</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-back"
        data-filename="back"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-back />
          <span class="icon-name">svg-icon-back</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-baseball"
        data-filename="baseball"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-baseball />
          <span class="icon-name">svg-icon-baseball</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-basketball"
        data-filename="basketball"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-basketball />
          <span class="icon-name">svg-icon-basketball</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-bell-filled"
        data-filename="bell-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-bell-filled />
          <span class="icon-name">svg-icon-bell-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-bell"
        data-filename="bell"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-bell />
          <span class="icon-name">svg-icon-bell</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-bicycle"
        data-filename="bicycle"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-bicycle />
          <span class="icon-name">svg-icon-bicycle</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-bottom-left"
        data-filename="bottom-left"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-bottom-left />
          <span class="icon-name">svg-icon-bottom-left</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-bottom-right"
        data-filename="bottom-right"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-bottom-right />
          <span class="icon-name">svg-icon-bottom-right</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-bottom"
        data-filename="bottom"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-bottom />
          <span class="icon-name">svg-icon-bottom</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-bowl"
        data-filename="bowl"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-bowl />
          <span class="icon-name">svg-icon-bowl</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-box"
        data-filename="box"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-box />
          <span class="icon-name">svg-icon-box</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-briefcase"
        data-filename="briefcase"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-briefcase />
          <span class="icon-name">svg-icon-briefcase</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-brush-filled"
        data-filename="brush-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-brush-filled />
          <span class="icon-name">svg-icon-brush-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-brush"
        data-filename="brush"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-brush />
          <span class="icon-name">svg-icon-brush</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-burger"
        data-filename="burger"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-burger />
          <span class="icon-name">svg-icon-burger</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-calendar"
        data-filename="calendar"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-calendar />
          <span class="icon-name">svg-icon-calendar</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-camera-filled"
        data-filename="camera-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-camera-filled />
          <span class="icon-name">svg-icon-camera-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-camera"
        data-filename="camera"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-camera />
          <span class="icon-name">svg-icon-camera</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-caret-bottom"
        data-filename="caret-bottom"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-caret-bottom />
          <span class="icon-name">svg-icon-caret-bottom</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-caret-left"
        data-filename="caret-left"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-caret-left />
          <span class="icon-name">svg-icon-caret-left</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-caret-right"
        data-filename="caret-right"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-caret-right />
          <span class="icon-name">svg-icon-caret-right</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-caret-top"
        data-filename="caret-top"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-caret-top />
          <span class="icon-name">svg-icon-caret-top</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-cellphone"
        data-filename="cellphone"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-cellphone />
          <span class="icon-name">svg-icon-cellphone</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-chat-dot-round"
        data-filename="chat-dot-round"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-chat-dot-round />
          <span class="icon-name">svg-icon-chat-dot-round</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-chat-dot-square"
        data-filename="chat-dot-square"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-chat-dot-square />
          <span class="icon-name">svg-icon-chat-dot-square</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-chat-line-round"
        data-filename="chat-line-round"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-chat-line-round />
          <span class="icon-name">svg-icon-chat-line-round</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-chat-line-square"
        data-filename="chat-line-square"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-chat-line-square />
          <span class="icon-name">svg-icon-chat-line-square</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-chat-round"
        data-filename="chat-round"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-chat-round />
          <span class="icon-name">svg-icon-chat-round</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-chat-square"
        data-filename="chat-square"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-chat-square />
          <span class="icon-name">svg-icon-chat-square</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-check"
        data-filename="check"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-check />
          <span class="icon-name">svg-icon-check</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-checked"
        data-filename="checked"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-checked />
          <span class="icon-name">svg-icon-checked</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-cherry"
        data-filename="cherry"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-cherry />
          <span class="icon-name">svg-icon-cherry</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-chicken"
        data-filename="chicken"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-chicken />
          <span class="icon-name">svg-icon-chicken</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-circle-check-filled"
        data-filename="circle-check-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-circle-check-filled />
          <span class="icon-name">svg-icon-circle-check-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-circle-check"
        data-filename="circle-check"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-circle-check />
          <span class="icon-name">svg-icon-circle-check</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-circle-close-filled"
        data-filename="circle-close-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-circle-close-filled />
          <span class="icon-name">svg-icon-circle-close-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-circle-close"
        data-filename="circle-close"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-circle-close />
          <span class="icon-name">svg-icon-circle-close</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-circle-plus-filled"
        data-filename="circle-plus-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-circle-plus-filled />
          <span class="icon-name">svg-icon-circle-plus-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-circle-plus"
        data-filename="circle-plus"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-circle-plus />
          <span class="icon-name">svg-icon-circle-plus</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-clearup"
        data-filename="clearup"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-clearup />
          <span class="icon-name">svg-icon-clearup</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-clock"
        data-filename="clock"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-clock />
          <span class="icon-name">svg-icon-clock</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-close-bold"
        data-filename="close-bold"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-close-bold />
          <span class="icon-name">svg-icon-close-bold</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-close"
        data-filename="close"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-close />
          <span class="icon-name">svg-icon-close</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-cloudy"
        data-filename="cloudy"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-cloudy />
          <span class="icon-name">svg-icon-cloudy</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-coffee-cup"
        data-filename="coffee-cup"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-coffee-cup />
          <span class="icon-name">svg-icon-coffee-cup</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-coffee"
        data-filename="coffee"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-coffee />
          <span class="icon-name">svg-icon-coffee</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-coin"
        data-filename="coin"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-coin />
          <span class="icon-name">svg-icon-coin</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-cold-drink"
        data-filename="cold-drink"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-cold-drink />
          <span class="icon-name">svg-icon-cold-drink</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-collection-tag"
        data-filename="collection-tag"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-collection-tag />
          <span class="icon-name">svg-icon-collection-tag</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-collection"
        data-filename="collection"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-collection />
          <span class="icon-name">svg-icon-collection</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-comment"
        data-filename="comment"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-comment />
          <span class="icon-name">svg-icon-comment</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-compass"
        data-filename="compass"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-compass />
          <span class="icon-name">svg-icon-compass</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-connection"
        data-filename="connection"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-connection />
          <span class="icon-name">svg-icon-connection</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-coordinate"
        data-filename="coordinate"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-coordinate />
          <span class="icon-name">svg-icon-coordinate</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-copy-document"
        data-filename="copy-document"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-copy-document />
          <span class="icon-name">svg-icon-copy-document</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-cpu"
        data-filename="cpu"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-cpu />
          <span class="icon-name">svg-icon-cpu</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-credit-card"
        data-filename="credit-card"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-credit-card />
          <span class="icon-name">svg-icon-credit-card</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-crop"
        data-filename="crop"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-crop />
          <span class="icon-name">svg-icon-crop</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-d-arrow-left"
        data-filename="d-arrow-left"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-d-arrow-left />
          <span class="icon-name">svg-icon-d-arrow-left</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-d-arrow-right"
        data-filename="d-arrow-right"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-d-arrow-right />
          <span class="icon-name">svg-icon-d-arrow-right</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-d-caret"
        data-filename="d-caret"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-d-caret />
          <span class="icon-name">svg-icon-d-caret</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-data-analysis"
        data-filename="data-analysis"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-data-analysis />
          <span class="icon-name">svg-icon-data-analysis</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-data-board"
        data-filename="data-board"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-data-board />
          <span class="icon-name">svg-icon-data-board</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-data-line"
        data-filename="data-line"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-data-line />
          <span class="icon-name">svg-icon-data-line</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-delete-filled"
        data-filename="delete-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-delete-filled />
          <span class="icon-name">svg-icon-delete-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-delete-location"
        data-filename="delete-location"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-delete-location />
          <span class="icon-name">svg-icon-delete-location</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-dessert"
        data-filename="dessert"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-dessert />
          <span class="icon-name">svg-icon-dessert</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-discount"
        data-filename="discount"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-discount />
          <span class="icon-name">svg-icon-discount</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-dish-dot"
        data-filename="dish-dot"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-dish-dot />
          <span class="icon-name">svg-icon-dish-dot</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-dish"
        data-filename="dish"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-dish />
          <span class="icon-name">svg-icon-dish</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-document-add"
        data-filename="document-add"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-document-add />
          <span class="icon-name">svg-icon-document-add</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-document-checked"
        data-filename="document-checked"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-document-checked />
          <span class="icon-name">svg-icon-document-checked</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-document-copy"
        data-filename="document-copy"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-document-copy />
          <span class="icon-name">svg-icon-document-copy</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-document-delete"
        data-filename="document-delete"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-document-delete />
          <span class="icon-name">svg-icon-document-delete</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-document-remove"
        data-filename="document-remove"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-document-remove />
          <span class="icon-name">svg-icon-document-remove</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-document"
        data-filename="document"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-document />
          <span class="icon-name">svg-icon-document</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-download"
        data-filename="download"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-download />
          <span class="icon-name">svg-icon-download</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-drizzling"
        data-filename="drizzling"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-drizzling />
          <span class="icon-name">svg-icon-drizzling</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-edit-pen"
        data-filename="edit-pen"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-edit-pen />
          <span class="icon-name">svg-icon-edit-pen</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-edit"
        data-filename="edit"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-edit />
          <span class="icon-name">svg-icon-edit</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-eleme-filled"
        data-filename="eleme-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-eleme-filled />
          <span class="icon-name">svg-icon-eleme-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-eleme"
        data-filename="eleme"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-eleme />
          <span class="icon-name">svg-icon-eleme</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-element-plus"
        data-filename="element-plus"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-element-plus />
          <span class="icon-name">svg-icon-element-plus</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-email"
        data-filename="email"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-email />
          <span class="icon-name">svg-icon-email</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-expand"
        data-filename="expand"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-expand />
          <span class="icon-name">svg-icon-expand</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-failed"
        data-filename="failed"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-failed />
          <span class="icon-name">svg-icon-failed</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-female"
        data-filename="female"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-female />
          <span class="icon-name">svg-icon-female</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-files"
        data-filename="files"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-files />
          <span class="icon-name">svg-icon-files</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-film"
        data-filename="film"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-film />
          <span class="icon-name">svg-icon-film</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-filter"
        data-filename="filter"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-filter />
          <span class="icon-name">svg-icon-filter</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-finished"
        data-filename="finished"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-finished />
          <span class="icon-name">svg-icon-finished</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-first-aid-kit"
        data-filename="first-aid-kit"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-first-aid-kit />
          <span class="icon-name">svg-icon-first-aid-kit</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-flag"
        data-filename="flag"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-flag />
          <span class="icon-name">svg-icon-flag</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-fold"
        data-filename="fold"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-fold />
          <span class="icon-name">svg-icon-fold</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-folder-add"
        data-filename="folder-add"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-folder-add />
          <span class="icon-name">svg-icon-folder-add</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-folder-checked"
        data-filename="folder-checked"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-folder-checked />
          <span class="icon-name">svg-icon-folder-checked</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-folder-delete"
        data-filename="folder-delete"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-folder-delete />
          <span class="icon-name">svg-icon-folder-delete</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-folder-opened"
        data-filename="folder-opened"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-folder-opened />
          <span class="icon-name">svg-icon-folder-opened</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-folder-remove"
        data-filename="folder-remove"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-folder-remove />
          <span class="icon-name">svg-icon-folder-remove</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-folder"
        data-filename="folder"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-folder />
          <span class="icon-name">svg-icon-folder</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-food"
        data-filename="food"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-food />
          <span class="icon-name">svg-icon-food</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-football"
        data-filename="football"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-football />
          <span class="icon-name">svg-icon-football</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-fork-spoon"
        data-filename="fork-spoon"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-fork-spoon />
          <span class="icon-name">svg-icon-fork-spoon</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-forward"
        data-filename="forward"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-forward />
          <span class="icon-name">svg-icon-forward</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-fries"
        data-filename="fries"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-fries />
          <span class="icon-name">svg-icon-fries</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-full-screen"
        data-filename="full-screen"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-full-screen />
          <span class="icon-name">svg-icon-full-screen</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-goblet-full"
        data-filename="goblet-full"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-goblet-full />
          <span class="icon-name">svg-icon-goblet-full</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-goblet-square-full"
        data-filename="goblet-square-full"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-goblet-square-full />
          <span class="icon-name">svg-icon-goblet-square-full</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-goblet-square"
        data-filename="goblet-square"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-goblet-square />
          <span class="icon-name">svg-icon-goblet-square</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-goblet"
        data-filename="goblet"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-goblet />
          <span class="icon-name">svg-icon-goblet</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-goods-filled"
        data-filename="goods-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-goods-filled />
          <span class="icon-name">svg-icon-goods-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-goods"
        data-filename="goods"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-goods />
          <span class="icon-name">svg-icon-goods</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-grape"
        data-filename="grape"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-grape />
          <span class="icon-name">svg-icon-grape</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-grid"
        data-filename="grid"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-grid />
          <span class="icon-name">svg-icon-grid</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-guide"
        data-filename="guide"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-guide />
          <span class="icon-name">svg-icon-guide</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-headset"
        data-filename="headset"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-headset />
          <span class="icon-name">svg-icon-headset</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-help-filled"
        data-filename="help-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-help-filled />
          <span class="icon-name">svg-icon-help-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-help"
        data-filename="help"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-help />
          <span class="icon-name">svg-icon-help</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-hide"
        data-filename="hide"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-hide />
          <span class="icon-name">svg-icon-hide</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-histogram"
        data-filename="histogram"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-histogram />
          <span class="icon-name">svg-icon-histogram</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-home-filled"
        data-filename="home-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-home-filled />
          <span class="icon-name">svg-icon-home-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-hot-water"
        data-filename="hot-water"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-hot-water />
          <span class="icon-name">svg-icon-hot-water</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-house"
        data-filename="house"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-house />
          <span class="icon-name">svg-icon-house</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-ice-cream-round"
        data-filename="ice-cream-round"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-ice-cream-round />
          <span class="icon-name">svg-icon-ice-cream-round</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-ice-cream-square"
        data-filename="ice-cream-square"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-ice-cream-square />
          <span class="icon-name">svg-icon-ice-cream-square</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-ice-cream"
        data-filename="ice-cream"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-ice-cream />
          <span class="icon-name">svg-icon-ice-cream</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-ice-drink"
        data-filename="ice-drink"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-ice-drink />
          <span class="icon-name">svg-icon-ice-drink</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-ice-tea"
        data-filename="ice-tea"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-ice-tea />
          <span class="icon-name">svg-icon-ice-tea</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-info-filled"
        data-filename="info-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-info-filled />
          <span class="icon-name">svg-icon-info-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-iphone"
        data-filename="iphone"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-iphone />
          <span class="icon-name">svg-icon-iphone</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-json"
        data-filename="json"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-json />
          <span class="icon-name">svg-icon-json</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-key"
        data-filename="key"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-key />
          <span class="icon-name">svg-icon-key</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-knife-fork"
        data-filename="knife-fork"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-knife-fork />
          <span class="icon-name">svg-icon-knife-fork</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-lightning"
        data-filename="lightning"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-lightning />
          <span class="icon-name">svg-icon-lightning</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-link"
        data-filename="link"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-link />
          <span class="icon-name">svg-icon-link</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-list"
        data-filename="list"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-list />
          <span class="icon-name">svg-icon-list</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-loading"
        data-filename="loading"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-loading />
          <span class="icon-name">svg-icon-loading</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-location-filled"
        data-filename="location-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-location-filled />
          <span class="icon-name">svg-icon-location-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-location-information"
        data-filename="location-information"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-location-information />
          <span class="icon-name">svg-icon-location-information</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-location"
        data-filename="location"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-location />
          <span class="icon-name">svg-icon-location</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-lock"
        data-filename="lock"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-lock />
          <span class="icon-name">svg-icon-lock</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-lollipop"
        data-filename="lollipop"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-lollipop />
          <span class="icon-name">svg-icon-lollipop</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-magic-stick"
        data-filename="magic-stick"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-magic-stick />
          <span class="icon-name">svg-icon-magic-stick</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-magnet"
        data-filename="magnet"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-magnet />
          <span class="icon-name">svg-icon-magnet</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-male"
        data-filename="male"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-male />
          <span class="icon-name">svg-icon-male</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-management"
        data-filename="management"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-management />
          <span class="icon-name">svg-icon-management</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-map-location"
        data-filename="map-location"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-map-location />
          <span class="icon-name">svg-icon-map-location</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-medal"
        data-filename="medal"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-medal />
          <span class="icon-name">svg-icon-medal</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-menu"
        data-filename="menu"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-menu />
          <span class="icon-name">svg-icon-menu</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-message-box"
        data-filename="message-box"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-message-box />
          <span class="icon-name">svg-icon-message-box</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-message"
        data-filename="message"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-message />
          <span class="icon-name">svg-icon-message</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-mic"
        data-filename="mic"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-mic />
          <span class="icon-name">svg-icon-mic</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-microphone"
        data-filename="microphone"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-microphone />
          <span class="icon-name">svg-icon-microphone</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-milk-tea"
        data-filename="milk-tea"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-milk-tea />
          <span class="icon-name">svg-icon-milk-tea</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-minus"
        data-filename="minus"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-minus />
          <span class="icon-name">svg-icon-minus</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-money"
        data-filename="money"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-money />
          <span class="icon-name">svg-icon-money</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-monitor"
        data-filename="monitor"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-monitor />
          <span class="icon-name">svg-icon-monitor</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-moon-night"
        data-filename="moon-night"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-moon-night />
          <span class="icon-name">svg-icon-moon-night</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-moon"
        data-filename="moon"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-moon />
          <span class="icon-name">svg-icon-moon</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-more-filled"
        data-filename="more-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-more-filled />
          <span class="icon-name">svg-icon-more-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-more"
        data-filename="more"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-more />
          <span class="icon-name">svg-icon-more</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-mostly-cloudy"
        data-filename="mostly-cloudy"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-mostly-cloudy />
          <span class="icon-name">svg-icon-mostly-cloudy</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-mouse"
        data-filename="mouse"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-mouse />
          <span class="icon-name">svg-icon-mouse</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-mug"
        data-filename="mug"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-mug />
          <span class="icon-name">svg-icon-mug</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-mute-notification"
        data-filename="mute-notification"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-mute-notification />
          <span class="icon-name">svg-icon-mute-notification</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-mute"
        data-filename="mute"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-mute />
          <span class="icon-name">svg-icon-mute</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-no-smoking"
        data-filename="no-smoking"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-no-smoking />
          <span class="icon-name">svg-icon-no-smoking</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-notebook"
        data-filename="notebook"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-notebook />
          <span class="icon-name">svg-icon-notebook</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-notification"
        data-filename="notification"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-notification />
          <span class="icon-name">svg-icon-notification</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-number"
        data-filename="number"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-number />
          <span class="icon-name">svg-icon-number</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-odometer"
        data-filename="odometer"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-odometer />
          <span class="icon-name">svg-icon-odometer</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-office-building"
        data-filename="office-building"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-office-building />
          <span class="icon-name">svg-icon-office-building</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-open"
        data-filename="open"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-open />
          <span class="icon-name">svg-icon-open</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-operation"
        data-filename="operation"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-operation />
          <span class="icon-name">svg-icon-operation</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-opportunity"
        data-filename="opportunity"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-opportunity />
          <span class="icon-name">svg-icon-opportunity</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-orange"
        data-filename="orange"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-orange />
          <span class="icon-name">svg-icon-orange</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-paperclip"
        data-filename="paperclip"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-paperclip />
          <span class="icon-name">svg-icon-paperclip</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-partly-cloudy"
        data-filename="partly-cloudy"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-partly-cloudy />
          <span class="icon-name">svg-icon-partly-cloudy</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-pear"
        data-filename="pear"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-pear />
          <span class="icon-name">svg-icon-pear</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-phone-filled"
        data-filename="phone-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-phone-filled />
          <span class="icon-name">svg-icon-phone-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-phone"
        data-filename="phone"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-phone />
          <span class="icon-name">svg-icon-phone</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-picture-filled"
        data-filename="picture-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-picture-filled />
          <span class="icon-name">svg-icon-picture-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-picture-rounded"
        data-filename="picture-rounded"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-picture-rounded />
          <span class="icon-name">svg-icon-picture-rounded</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-picture"
        data-filename="picture"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-picture />
          <span class="icon-name">svg-icon-picture</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-pie-chart"
        data-filename="pie-chart"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-pie-chart />
          <span class="icon-name">svg-icon-pie-chart</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-place"
        data-filename="place"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-place />
          <span class="icon-name">svg-icon-place</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-platform"
        data-filename="platform"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-platform />
          <span class="icon-name">svg-icon-platform</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-plus"
        data-filename="plus"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-plus />
          <span class="icon-name">svg-icon-plus</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-pointer"
        data-filename="pointer"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-pointer />
          <span class="icon-name">svg-icon-pointer</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-position"
        data-filename="position"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-position />
          <span class="icon-name">svg-icon-position</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-postcard"
        data-filename="postcard"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-postcard />
          <span class="icon-name">svg-icon-postcard</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-pouring"
        data-filename="pouring"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-pouring />
          <span class="icon-name">svg-icon-pouring</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-present"
        data-filename="present"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-present />
          <span class="icon-name">svg-icon-present</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-preview"
        data-filename="preview"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-preview />
          <span class="icon-name">svg-icon-preview</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-price-tag"
        data-filename="price-tag"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-price-tag />
          <span class="icon-name">svg-icon-price-tag</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-printer"
        data-filename="printer"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-printer />
          <span class="icon-name">svg-icon-printer</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-promotion"
        data-filename="promotion"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-promotion />
          <span class="icon-name">svg-icon-promotion</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-question-filled"
        data-filename="question-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-question-filled />
          <span class="icon-name">svg-icon-question-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-rank"
        data-filename="rank"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-rank />
          <span class="icon-name">svg-icon-rank</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-reading-lamp"
        data-filename="reading-lamp"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-reading-lamp />
          <span class="icon-name">svg-icon-reading-lamp</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-reading"
        data-filename="reading"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-reading />
          <span class="icon-name">svg-icon-reading</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-refresh-left"
        data-filename="refresh-left"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-refresh-left />
          <span class="icon-name">svg-icon-refresh-left</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-refresh-right"
        data-filename="refresh-right"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-refresh-right />
          <span class="icon-name">svg-icon-refresh-right</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-refresh"
        data-filename="refresh"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-refresh />
          <span class="icon-name">svg-icon-refresh</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-refrigerator"
        data-filename="refrigerator"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-refrigerator />
          <span class="icon-name">svg-icon-refrigerator</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-remove-filled"
        data-filename="remove-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-remove-filled />
          <span class="icon-name">svg-icon-remove-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-remove"
        data-filename="remove"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-remove />
          <span class="icon-name">svg-icon-remove</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-right"
        data-filename="right"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-right />
          <span class="icon-name">svg-icon-right</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-save"
        data-filename="save"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-save />
          <span class="icon-name">svg-icon-save</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-scale-to-original"
        data-filename="scale-to-original"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-scale-to-original />
          <span class="icon-name">svg-icon-scale-to-original</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-school"
        data-filename="school"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-school />
          <span class="icon-name">svg-icon-school</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-scissor"
        data-filename="scissor"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-scissor />
          <span class="icon-name">svg-icon-scissor</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-search"
        data-filename="search"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-search />
          <span class="icon-name">svg-icon-search</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-select"
        data-filename="select"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-select />
          <span class="icon-name">svg-icon-select</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sell"
        data-filename="sell"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sell />
          <span class="icon-name">svg-icon-sell</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-semi-select"
        data-filename="semi-select"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-semi-select />
          <span class="icon-name">svg-icon-semi-select</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-service"
        data-filename="service"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-service />
          <span class="icon-name">svg-icon-service</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-set-up"
        data-filename="set-up"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-set-up />
          <span class="icon-name">svg-icon-set-up</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-setting"
        data-filename="setting"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-setting />
          <span class="icon-name">svg-icon-setting</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-share"
        data-filename="share"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-share />
          <span class="icon-name">svg-icon-share</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-ship"
        data-filename="ship"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-ship />
          <span class="icon-name">svg-icon-ship</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-shop"
        data-filename="shop"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-shop />
          <span class="icon-name">svg-icon-shop</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-shopping-bag"
        data-filename="shopping-bag"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-shopping-bag />
          <span class="icon-name">svg-icon-shopping-bag</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-shopping-cart-full"
        data-filename="shopping-cart-full"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-shopping-cart-full />
          <span class="icon-name">svg-icon-shopping-cart-full</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-shopping-cart"
        data-filename="shopping-cart"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-shopping-cart />
          <span class="icon-name">svg-icon-shopping-cart</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-smoking"
        data-filename="smoking"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-smoking />
          <span class="icon-name">svg-icon-smoking</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-soccer"
        data-filename="soccer"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-soccer />
          <span class="icon-name">svg-icon-soccer</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sold-out"
        data-filename="sold-out"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sold-out />
          <span class="icon-name">svg-icon-sold-out</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sort-down"
        data-filename="sort-down"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sort-down />
          <span class="icon-name">svg-icon-sort-down</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sort-up"
        data-filename="sort-up"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sort-up />
          <span class="icon-name">svg-icon-sort-up</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sort"
        data-filename="sort"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sort />
          <span class="icon-name">svg-icon-sort</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-stamp"
        data-filename="stamp"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-stamp />
          <span class="icon-name">svg-icon-stamp</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-star-filled"
        data-filename="star-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-star-filled />
          <span class="icon-name">svg-icon-star-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-star"
        data-filename="star"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-star />
          <span class="icon-name">svg-icon-star</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-stopwatch"
        data-filename="stopwatch"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-stopwatch />
          <span class="icon-name">svg-icon-stopwatch</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-success-filled"
        data-filename="success-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-success-filled />
          <span class="icon-name">svg-icon-success-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sugar"
        data-filename="sugar"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sugar />
          <span class="icon-name">svg-icon-sugar</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-suitcase"
        data-filename="suitcase"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-suitcase />
          <span class="icon-name">svg-icon-suitcase</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sunny"
        data-filename="sunny"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sunny />
          <span class="icon-name">svg-icon-sunny</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sunrise"
        data-filename="sunrise"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sunrise />
          <span class="icon-name">svg-icon-sunrise</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-sunset"
        data-filename="sunset"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-sunset />
          <span class="icon-name">svg-icon-sunset</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-switch-button"
        data-filename="switch-button"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-switch-button />
          <span class="icon-name">svg-icon-switch-button</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-takeaway-box"
        data-filename="takeaway-box"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-takeaway-box />
          <span class="icon-name">svg-icon-takeaway-box</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-ticket"
        data-filename="ticket"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-ticket />
          <span class="icon-name">svg-icon-ticket</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-tickets"
        data-filename="tickets"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-tickets />
          <span class="icon-name">svg-icon-tickets</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-timer"
        data-filename="timer"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-timer />
          <span class="icon-name">svg-icon-timer</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-toilet-paper"
        data-filename="toilet-paper"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-toilet-paper />
          <span class="icon-name">svg-icon-toilet-paper</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-tools"
        data-filename="tools"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-tools />
          <span class="icon-name">svg-icon-tools</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-top-left"
        data-filename="top-left"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-top-left />
          <span class="icon-name">svg-icon-top-left</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-top-right"
        data-filename="top-right"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-top-right />
          <span class="icon-name">svg-icon-top-right</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-top"
        data-filename="top"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-top />
          <span class="icon-name">svg-icon-top</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-trend-charts"
        data-filename="trend-charts"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-trend-charts />
          <span class="icon-name">svg-icon-trend-charts</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-trophy"
        data-filename="trophy"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-trophy />
          <span class="icon-name">svg-icon-trophy</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-turn-off"
        data-filename="turn-off"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-turn-off />
          <span class="icon-name">svg-icon-turn-off</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-umbrella"
        data-filename="umbrella"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-umbrella />
          <span class="icon-name">svg-icon-umbrella</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-unlock"
        data-filename="unlock"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-unlock />
          <span class="icon-name">svg-icon-unlock</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-upload-filled"
        data-filename="upload-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-upload-filled />
          <span class="icon-name">svg-icon-upload-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-upload"
        data-filename="upload"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-upload />
          <span class="icon-name">svg-icon-upload</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-user-filled"
        data-filename="user-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-user-filled />
          <span class="icon-name">svg-icon-user-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-user"
        data-filename="user"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-user />
          <span class="icon-name">svg-icon-user</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-van"
        data-filename="van"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-van />
          <span class="icon-name">svg-icon-van</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-video-camera-filled"
        data-filename="video-camera-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-video-camera-filled />
          <span class="icon-name">svg-icon-video-camera-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-video-camera"
        data-filename="video-camera"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-video-camera />
          <span class="icon-name">svg-icon-video-camera</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-video-pause"
        data-filename="video-pause"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-video-pause />
          <span class="icon-name">svg-icon-video-pause</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-video-play"
        data-filename="video-play"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-video-play />
          <span class="icon-name">svg-icon-video-play</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-view"
        data-filename="view"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-view />
          <span class="icon-name">svg-icon-view</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-vue"
        data-filename="vue"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-vue />
          <span class="icon-name">svg-icon-vue</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-wallet-filled"
        data-filename="wallet-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-wallet-filled />
          <span class="icon-name">svg-icon-wallet-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-wallet"
        data-filename="wallet"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-wallet />
          <span class="icon-name">svg-icon-wallet</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-warning-filled"
        data-filename="warning-filled"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-warning-filled />
          <span class="icon-name">svg-icon-warning-filled</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-warning"
        data-filename="warning"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-warning />
          <span class="icon-name">svg-icon-warning</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-watch"
        data-filename="watch"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-watch />
          <span class="icon-name">svg-icon-watch</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-watermelon"
        data-filename="watermelon"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-watermelon />
          <span class="icon-name">svg-icon-watermelon</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-wind-power"
        data-filename="wind-power"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-wind-power />
          <span class="icon-name">svg-icon-wind-power</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-zoom-in"
        data-filename="zoom-in"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-zoom-in />
          <span class="icon-name">svg-icon-zoom-in</span>
        </span>
      </li>

      <li
        class="svg-demo-icon-list-item"
        data-name="svg-icon-zoom-out"
        data-filename="zoom-out"
        @click="copySvgIcon"
      >
        <span class="demo-svg-icon">
          <svg-icon-zoom-out />
          <span class="icon-name">svg-icon-zoom-out</span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
import clipboardCopy from 'clipboard-copy'
const copyContent = async (content, _self) => {
  await clipboardCopy(content)
  _self.$proMessage({
    showClose: true,
    message: '复制成功!' + content,
    type: 'success'
  })
}
export default {
  name: 'icon-demo-component',
  methods: {
    async copySvgIcon(e) {
      const { name } = e.currentTarget.dataset
      const msg = '<' + name + '/>'
      await copyContent(msg, this)
    }
  }
}
</script>
<style lang="scss">
.el-svg-icon {
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  bottom: -0.15em;
  & > svg {
    height: 1em;
    width: 1em;
  }
}
.svg-demo-icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  &-item {
    text-align: center;
    color: #606266;
    height: 90px;
    font-size: 20px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    transition: background-color 0.3s;
    &:hover {
      background-color: #f2f6fc;
      color: #000000;
    }
    .demo-svg-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      cursor: pointer;
      .icon-name {
        margin-top: 8px;
        font-size: 13px;
      }
    }
  }
}
</style>
